<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <!-- <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">

            <el-form-item prop="moduleName">
                <el-input v-model="searchForm.moduleName" clearable placeholder="模块名称"></el-input>
            </el-form-item>
            <el-form-item prop="moduleStatus">
              <el-select filterable clearable v-model="searchForm.moduleStatus" placeholder="模块状态">
                  <el-option label="启用" value="1" ></el-option>
                  <el-option label="禁用" value="2" ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div> -->
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft" style="display: flex;">
             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" >创建模块</el-button>

             <div class="addressBox" style="display: flex;width: 800px;">
               <div style="width: 240px;padding-left:30px;display: flex;align-items: center;">士多优选提货地址：</div>
               <el-input placeholder="请输入提货地址" v-model="mapForm.activityAddress">
                  <template slot="append" >
                    <div @click="handleOpenMap">地图中选点</div></template>
                </el-input>
                <el-button type="info" @click="handleMapSyn()" size="small"  style="margin-left:15px">同步</el-button>
             </div>

          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"   stripe v-loading="loading"
            row-key="moduleId"
          >
           <!-- <el-table-column prop="activityNo" label="模块编号" v-if="!hideTableColumn.includes('activityConfigId')" width="210" align="center"></el-table-column> -->
            <el-table-column prop="moduleName" label="模块名称" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
           <!-- <el-table-column prop="subTitle" label="模块备注" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column> -->
            <el-table-column prop="moduleImage" label="模块图片" v-if="!hideTableColumn.includes('activityTypeName')" align="center">
              <template slot-scope="scope">
                <el-image :src="scope.row.moduleImage" v-image-preview="scope.row.moduleImage" style="height: 60px;" fit="fill" v-if="scope.row.moduleImage"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="moduleImage" label="模块摆放区域" v-if="!hideTableColumn.includes('activityTypeName')" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.moduleBelongType=='1'">活动推荐</span>
                <span v-else-if="scope.row.moduleBelongType=='2'">推荐商品</span>
                <span v-else-if="scope.row.moduleBelongType=='3'">士多优选</span>
                <span v-else-if="scope.row.moduleBelongType=='4'">免费专区</span>
              </template>
            </el-table-column>
             <!-- <el-table-column prop="orderSort" label="排序" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="moduleStatus" label="模块状态" v-if="!hideTableColumn.includes('type')" align="center" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.moduleStatus=='1'">启用</el-tag>
                <el-tag v-else type="warning">禁用</el-tag>
              </template>
            </el-table-column> -->
            <el-table-column label="状态"  align="center">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.moduleStatus" :id="scope.row.moduleStatus" text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" ></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作"  width="150" v-if="!hideTableColumn.includes('active')" align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <!-- <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button> -->
                  <!-- <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-circle-plus-outline"
                    @click="handleAddChild(scope.row)"
                  >新增</el-button> -->
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-shopping-cart-full"
                    @click="handleAddShop(scope.row,'2')"
                    v-if="scope.row.moduleType=='2'"
                  >商品管理</el-button>

                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-shop"
                    v-if="scope.row.moduleType=='1'"
                    @click="handleAddShop(scope.row,'1')"
                  >商家管理</el-button>
                 <!-- <el-button
                    size="medium"
                    type="text"
                    :icon="scope.row.activityStatus=='1'?'el-icon-video-pause':'el-icon-video-play'"
                    @click="handleActivityStop(scope.row)"
                    v-if="scope.row.status='1'"
                  >{{scope.row.moduleStatus=='1'?'禁用':'启用'}}</el-button> -->
                 <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row)"
                  >修改</el-button>

                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

    <!--地图选点-->
    <el-dialog title="选择定位" width="1200px" v-dialogDrag :close-on-click-modal="false" :visible.sync="mapVisible"
    	@close="mapVisible = false" class="mapBox">
    	<qq-map map-key="T23BZ-PHZHD-LMY4N-PIPBF-R636H-S2F4K" key-name="qdStoreAdmin" @callback="callback"
    		@hideMap="showMap = false"></qq-map>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="mapVisible = false" size="small">取 消</el-button>
    		<el-button type="primary" @click="selectMapLocation" size="small" :loading="btnLoading">确 定</el-button>
    	</div>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog :title="dialogTitle" width="700px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false" :close-on-click-modal="false">
      <el-form  :model="form" id="userDialog" status-icon :rules="rules" ref="form" label-position="right" >
       <el-form-item label="模块名称" prop="moduleName" label-width="125px" >
          <el-input type="text" v-model="form.moduleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="" label-width="125px" >
           <el-time-select
             placeholder="开始时间"
             v-model="form.startTime"
             style="width: 130px;"
             :picker-options="{
               start: '17:00',
               step: '01:00',
               end: '24:00'
             }">
           </el-time-select> - <el-time-select
             placeholder="结束时间"
             v-model="form.endTime"
             style="width: 130px;"
             :picker-options="{
               start: '17:00',
               step: '01:00',
               end: '24:00'
             }">
           </el-time-select>
         </el-form-item>
        <el-form-item label="模块图片" prop="moduleImage" label-width="125px" >
          <MyUpImg :imagePreview='form.moduleImage'  imageSize="chang" @change="imageChange($event, 'moduleImage')"></MyUpImg>
        </el-form-item>
        <el-form-item label="类型" prop="moduleType" label-width="125px" >
            <el-radio-group v-model="form.moduleType">
              <el-radio label="1">商家</el-radio>
              <el-radio label="2">商品</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item label="模块摆放区域" prop="moduleBelongType" label-width="125px" >
             <el-radio-group v-model="form.moduleBelongType">
               <el-radio :label="item.dictValue" v-for="item in moduleBelongTypeList">{{item.dictLabel}}</el-radio>
             </el-radio-group>
          </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogTitle!='查看模块'">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleActivitySubmit('form')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
      </el-dialog>
      <!-- 商品管理 -->
      <el-dialog :title="moduleType=='2'?'商品管理':'商家管理' " width="1000px" v-dialogDrag :visible.sync="addShopVisible" @close="addShopVisible = false" :close-on-click-modal="false">
        <el-dialog width="800px" :title="innerTitleVisible" :visible.sync="innerVisible" append-to-body v-dialogDrag >
           <div class="search">
              <el-form  :model="addShopForm" id="searchBox" status-icon :rules="addShopRules" class="demo-form-inline"  ref="addShopForm" label-position="right" >
               <el-form-item prop="goodsName">
                 <el-input v-model="searchDialogForm.goodsName" clearable placeholder="请输入商品名称" v-if="moduleType=='2'"></el-input>
               </el-form-item>
               <el-form-item prop="storeName" style="margin:0 10px;">
                 <el-input v-model="searchDialogForm.storeName" clearable placeholder="请输入商家名称"></el-input>
               </el-form-item>
               <el-form-item class="clearfix">
                 <el-button type="primary" @click="handleDialogSearch()" icon="el-icon-search">查询</el-button>
               </el-form-item>
              </el-form>
           </div>
           <div class="table" ref="table">
             <el-table :data="dataListDialog" style="width: 100%;" row-key="id" border  default-expand-all stripe v-loading = "loading1" v-if="moduleType=='2'">
               <el-table-column prop="name" label="商品图片"  width="90">
                 <template #default="scope">
                    <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
                 </template>
               </el-table-column>
               <el-table-column prop="goodsName" label="商品名称"   width="120">
                 <template #default="scope">
                   <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
                 </template>
               </el-table-column>
               <el-table-column prop="storeName" label="商家门店名称"  align="center" width="200" show-overflow-tooltip></el-table-column>

               <el-table-column prop="originalPrice" label="原价(元)"  align="center" width="120"></el-table-column>
               <el-table-column prop="salePrice" label="平台售价(元)"  align="center" width="120"></el-table-column>
               <el-table-column prop="name" label="操作"  min-width="90" align="center" fixed="right">
                 <template #default="scope">
                     <el-button
                       type="text"
                       @click="handleCheckShop(scope.row)"
                     >选择</el-button>
                 </template>
               </el-table-column>
             </el-table>

             <el-table :data="dataListDialog" style="width: 100%;" row-key="id" border  default-expand-all stripe v-loading = "loading1" v-if="moduleType=='1'">
               <el-table-column prop="name" label="门店logo"  width="90">
                 <template #default="scope">
                    <el-image :src="scope.row.storeLogo" fit="fill" v-image-preview="scope.row.storeLogo" class="img"></el-image>
                 </template>
               </el-table-column>
               <el-table-column prop="storeName" label="商家名称"   width="120">
                 <template #default="scope">
                   <span class="ellipsis-item2" :title="scope.row.storeName">{{scope.row.storeName}}</span>
                 </template>
               </el-table-column>


               <el-table-column prop="categoryName" label="商家类型"  align="center" width="120"></el-table-column>
               <el-table-column prop="mapName" label="地址"  align="center" width="180"></el-table-column>
               <el-table-column prop="name" label="操作"  min-width="90" align="center" fixed="right">
                 <template #default="scope">
                     <el-button
                       type="text"
                       @click="handleCheckShop(scope.row)"
                     >选择</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
           <div class="page" ref="page">
             <MyPagination
                :total="totalDialog"
                :page.sync="searchDialogForm.pageNum"
                :limit.sync="searchDialogForm.pageSize"
                @pagination="handleDialogList"
              />
           </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="innerVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="handleActivityAddShopSubmit('addShopForm')" size="small" :loading="btnLoading">保 存</el-button>
            </div>
        </el-dialog>

        <div style="margin-bottom: 15px;display: flex;">
          <el-button type="primary" @click="handleActivityAddShop()" icon="el-icon-add" size="small">{{moduleType=='2'?'添加商品':'添加商家'}}</el-button>
        </div>
        <el-table :data="activityShopList" style="width: 100%;"  border  @selection-change="handleSelectionChange"  stripe v-loading="activityShopLoading">
         <el-table-column prop="name" :label="moduleType=='2'?'商品图片':'商家图片'" width="100">
           <template #default="scope">
              <el-image :src="scope.row.storeOrGoodsImage" fit="fill" v-image-preview="scope.row.storeOrGoodsImage" class="img"></el-image>
           </template>
         </el-table-column>
         <el-table-column prop="storeOrGoodsName" :label="moduleType=='2'?'商品名称':'商家名称'" >
           <template #default="scope">
             <span class="ellipsis-item2" :title="scope.row.storeOrGoodsName">{{scope.row.storeOrGoodsName}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="storeOrGoodsName" label="状态" v-if="moduleId=='5'" width="150">
           <template #default="scope">
             <el-tag :type="scope.row.auditStatus=='1'?'primary':(scope.row.auditStatus=='2'?'success':'warning')" >
               {{scope.row.auditStatus=='1'?'待审核':(scope.row.auditStatus=='2'?'通过':'驳回')}}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" min-width="90" align="center" fixed="right">
           <template #default="scope">
                <el-button
                  v-if="moduleId=='5' && scope.row.auditStatus=='1'"
                  type="text"
                  icon="el-icon-s-custom"
                  @click="handleAuditShop(scope.row)"
                >审核</el-button>
               <el-button
                 type="text"
                 icon="el-icon-delete-solid"
                 @click="handleActivityDeltShop(scope.row)"
               >删除</el-button>
           </template>
         </el-table-column>
        </el-table>

        <!-- 审核	 -->
        <el-dialog title="审核" width="800px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible"  append-to-body
        	@close="auditVisible = false">
        	<el-form id="userDialog" label-position="right" >
        		<el-form-item label="审核:" prop="auditResult" label-width="125px" style="width:100%">
        			<el-radio-group v-model="auditStatus">
        				<el-radio label="2">通过</el-radio>
        				<el-radio label="3">驳回</el-radio>
        			</el-radio-group>
        		</el-form-item>
        	</el-form>
        	<div slot="footer" class="dialog-footer">
        		<el-button @click="auditVisible = false" size="small">取 消</el-button>
        		<el-button type="primary" @click="shopAuditSubmit('auditstatus')" size="small" :loading="btnLoading">确 定
        		</el-button>
        	</div>
        </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    addActivityModule, addModuleGoods, delModuleGoods, getActivityModuleList, getStoreOrGoodsList, updateActivityModule,BgoodsGetList, BgetStoreList, auditModuleGoods,BgetGoodsList,
    getGoodsCollectionAddress,setGoodsCollectionAddress,activityModuleEnableOrDisable
  } from '@/api/getData'
  import option from '../../common/option.js';
  import QqMap from '@/components/Qqmap/qqmap'
  export default {
    components: { Treeselect,QqMap },
    data() {
      return {
        auditVisible:false,
        auditStatus:'1',
        relationId:'',
        loading: false,
        loading1: false,
        btnLoading: false,
        inputLoading:false,
        menuOptions:[],
        searchForm: {
          moduleName:'',
          moduleStatus:'',
          subTitle:'',
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        moduleType:'',
        form:{
          moduleId:'',
          moduleName:'',
          moduleImage:'',
          moduleType:'2',//1商家 2商品
          startTime:'',
          endTime:''
        },
        time:[],
        rules: {
         moduleName: [{required: true, message: '请输入模块名称',trigger: 'blur'}],
         // orderSort: [{required: true, message: '请输入模块排序',trigger: 'blur'}],
        },
        addShopVisible:false,
        activityShopList:[],
        activityShopLoading:false,

        innerVisible:false,
        addShopForm:{
          activityConfigId:'',
          id:'',
          categoryId:'',
          categoryName:'',
          goodsSpu:''
        },
        addShopRules: {
         categoryId: [{required: true, message: '请输入商品类目ID',trigger: 'blur'}],
         categoryName: [{required: true, message: '请输入商品类目',trigger: 'blur'}],
         goodsSpu: [{required: true, message: '请输入商品spu',trigger: 'blur'}]
        },
        multipleSelection:[],
        activityConfigId:"",
        actionUrl:common.apihost+"/goods/houniaoActivityGoods/importData",
        header:{
          AuthorizationQianZhi:''
        },
        innerTitleVisible:'',
        searchDialogForm: {
          auditStatus: "2",
          goodsType:'',
          goodsName:'',
          storeName:'',
          pageNum: 1,
          pageSize: 10,
        },
        dataListDialog:[],
        totalDialog:0,
        moduleId:'',

        innerVisible1:false,
        coverForm:{
          moduleRelationId:'',
          img:'',

        },
        coverRules: {},

        moduleBelongTypeList:[],

        mapVisible:false,
        showMap:false,
        mapForm:{
          activityAddress:'',
          mapAddress:'',
          latitude:'',
          longitude:'',
        }
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.header.AuthorizationQianZhi = localStorage.getItem('bossAppToken');
      this.dataInfo();
      //this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
      this.getSelectList('module_belong_type').then(res=>{
          this.moduleBelongTypeList = res.data;
        })
      this.mapDataInfo();
    },
    methods: {
      async handleChangeStatus(row) {
        try {
          let data = {
            moduleId: row.moduleId,
            status: row.moduleStatus,
          }
          const result = await activityModuleEnableOrDisable(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.moduleStatus = !row.moduleStatus;
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleOpenMap(){
        this.mapVisible = true;
        console.log(3)
      },
      mapDataInfo(){
        getGoodsCollectionAddress().then((result) => {
           if (result.code == '200') {
              this.mapForm = {
                activityAddress: result.data.collectionAddress,
                mapAddress: result.data.mapAddress,
                latitude: result.data.latitude,
                longitude: result.data.longitude,
              }
            }else{
               this.$message.error(result.msg);
            }
        });
      },
      handleMapSyn(){
        setGoodsCollectionAddress(this.mapForm).then((result) => {
           if (result.code == '200') {
              this.$message.success('修改成功');
              //this.mapDataInfo();

            }else{
               this.$message.error(result.msg);
            }
        });
      },
      /** 地图选择回调 **/
      callback(mapData) {
      	this.showMap = false;
      	this.mapData = mapData;
      },
      /** 选择地图中的点 **/
      selectMapLocation() {
        console.log(this.mapData)
      	this.mapVisible = false;
      	this.mapForm.activityAddress = this.mapData.poiname;
        this.mapForm.mapAddress = this.mapData.poiaddress;
      	this.mapForm.latitude = this.mapData.latlng.lat;
      	this.mapForm.longitude = this.mapData.latlng.lng;
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.moduleId,
          label: node.moduleName,
          children: node.children
        };
      },
      handleAuditShop(row){
        this.auditStatus = '2';
        this.relationId = row.relationId;
        this.auditVisible = true;
      },
      shopAuditSubmit(){
        this.btnLoading = true;
        let data = {
          relationId: this.relationId,
          status : 2,
        }
        auditModuleGoods(data).then((result)=>{
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.activityShopListFn();
              this.auditVisible = false;
            }
            this.btnLoading = false;
        })


      },
      handleActivityAddCover(row){
        this.innerVisible1 = true;
        this.coverForm.moduleRelationId = row.moduleRelationId;
        this.coverForm.img = row.coverImg;
        // this.coverForm.points = row.needPoints;
      },
      handleAddCover(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result = await settingCoverImg(this.coverForm);
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.innerVisible1 = false;
              this.activityShopListFn();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      async handleCheckShop(row){
        try {
          let data = {
            moduleId:this.moduleId,
            moduleType:this.moduleType,
            storeOrGoodsId: this.moduleType=='2'?row.goodsId:row.storeId,
            storeOrGoodsImage:this.moduleType=='2'?row.goodsImage:row.storeLogo,
            storeOrGoodsName:this.moduleType=='2'?row.goodsName:row.storeName
          }
          const result = await addModuleGoods(data);
          if (result.code == 200) {
            this.$message({
              message: result.msg,
              type: 'success'
            });
            this.innerVisible = false;
            this.activityShopListFn();
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      handleDialogSearch(){
          this.searchDialogForm.pageNum = 1;
          this.handleDialogList();
      },
      async handleDialogList() {
        try {
          this.loading1 = true;
          let result;
          if(this.moduleType=='2'){
            result = await BgetGoodsList(this.searchDialogForm);
          }else{
            result = await BgetStoreList(this.searchDialogForm);
          }


          if (result.code == 200) {
            this.totalDialog = result.total;
            this.dataListDialog = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      imageChange(path, name) {
        this.form[name] = path
      },
      imageChange1(path, name) {
        this.coverForm[name] = path
      },
      handleActivityDeltShop(row){
        this.$confirm(`您确定要删除商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delModuleGoods({relationId:row.relationId}).then((result) => {
            if (result.code == '200') {
                 this.activityShopListFn();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      /** 单个或批量删除 **/
      handleDelt(row){
        let ids = [];
        if(row){
          ids = [row.id]
        }else{
          if(!this.multipleSelection.length){
            this.$modal.msgError("请先选中在批量删除");
            return;
          }else{
            ids = [];
            for(let i=0;i<this.multipleSelection.length;i++){
              ids.push(this.multipleSelection[i].id)
            }
          }
        }
        this.$confirm(`您确定要删除商品SPU为${ids.join(',')}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ActivityBatchDelete({goodsIds:ids.join(',')}).then((result) => {
            if (result.code == '200') {
                 this.activityShopListFn();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      handleActivityAddShopEdit(row){
        this.addShopForm = {
          activityConfigId:this.activityConfigId,
          id:row.id,
          categoryId:row.categoryId,
          categoryName:row.categoryName,
          goodsSpu:row.goodsSpu
        };
        this.innerTitleVisible = '修改商品'
        this.innerVisible = true;
      },
      handleActivityAddShopView(row){
        this.addShopForm = {
          activityConfigId:this.activityConfigId,
          id:row.id,
          categoryId:row.categoryId,
          categoryName:row.categoryName,
          goodsSpu:row.goodsSpu
        };
        this.innerTitleVisible = '查看商品'
        this.innerVisible = true;
      },
      handleAvatarSuccess(res, file) {
        if(res.code==200){
          this.activityShopListFn();
          this.$message.success(res.msg);
        }else{
          this.$message.error(res.msg)
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleActivityAddShop(){
        this.addShopForm = {
          id:'',
          activityConfigId:this.activityConfigId,
          categoryId:'',
          categoryName:'',
          goodsSpu:''
        };
         this.innerTitleVisible = (this.moduleType=='2'?'新增商品':'新增商家')
        this.innerVisible = true;
        this.handleDialogList();
      },
      handleActivityAddShopSubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result;

            if(this.addShopForm.id){
              result = await updateActivityGoods(this.addShopForm);
            }else{
              result = await addActivityGoods(this.addShopForm);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.innerVisible = false;
              this.activityShopListFn();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      async activityShopListFn(){
        try {
          this.activityShopLoading = true;
           const result = await getStoreOrGoodsList({moduleId:this.moduleId});
            if (result.code == 200) {
              this.activityShopList = result.rows;
            } else {
              this.$message.error(result.msg);
            }
             this.activityShopLoading = false;
        } catch (err) {
          this.activityShopLoading = false;
          console.log(err)
        }
      },
      resetSearch(){
        this.createTime = [];
        this.sendTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      getSelect(){
        this.getSelectList('houniao_activity_type').then((res)=>{
          this.typeList = res.data;
        })
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getActivityModuleList({page:1,pageSize:20});
          if (result.code == 200) {
            this.dataList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleActivityStop(row){
        this.$confirm(`您确定${row.moduleStatus=='1'?'禁用':'启用'}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          activityGoodsModuleEnableOrDisable({moduleId:row.moduleId,moduleStatus:row.moduleStatus=='1'?'2':'1' }).then((result) => {
            if (result.code == '200') {
                 this.dataInfo();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
                 this.addVisible = false;
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      handleAddShop(row,moduleType){
        this.moduleId = row.moduleId;
        this.moduleType = moduleType;
        this.activityShopListFn();
        this.addShopVisible = true;
        if(row.moduleBelongType=='3' || row.moduleBelongType=='4'){
          this.searchDialogForm.goodsType = row.moduleBelongType;
        }else{
          this.searchDialogForm.goodsType = ''
        }


      },
      /** 新增模块类型 **/
      handleActivitySubmit(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result;
            if(this.form.moduleId){
              result = await updateActivityModule(this.form);
            }else{
              result = await addActivityModule(this.form);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.addVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;
          }
        })
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      handleView(row){
        this.$router.push({
        	path: '/operatingTools/activityManagementAdd',
        	query: {
        		type: 'view'
        	}
        });
      },
      handleAdd(){
        this.dialogTitle = '创建模块';
        this.form = {
          moduleId:'',
          moduleName:'',
          moduleImage:'',
          startTime:'',
          endTime:'',
          moduleType:'2'
        };
        this.addVisible = true;
      },
      handleAddChild(row){
        this.dialogTitle = '创建模块';
        this.form = {
          parentId:row.moduleId,
          moduleId:'',
          moduleName:'',
          subTitle:'',
          moduleImg:'',
          orderSort:'',
        };
        this.addVisible = true;
      },
      handleEdit(row){
        this.dialogTitle = '修改模块';
        this.form = {
          moduleId:row.moduleId,
          moduleName:row.moduleName,
          moduleImage:row.moduleImage,
          startTime:row.startTime,
          endTime:row.endTime,
          moduleType:row.moduleType+'',
          moduleBelongType:row.moduleBelongType+''
        };
        this.addVisible = true;
      },
      handleView(row){
        this.dialogTitle = '查看模块';
        this.form = {
          activityConfigId:row.activityConfigId,
          activityName:row.activityName,
          sortOrder:row.sortOrder,
          activityTypeId:row.activityTypeId+'',
          activityTypeName:row.activityTypeName,
          supplierName:row.supplierName,
          discount:row.discount,
          activityPicture:row.activityPicture,
          activityUrl:row.activityUrl,
          supplierType:row.supplierType+'',
          validityFlag:row.validityFlag+'',
        };
        if(row.validityEndDate){
          this.time = [row.validityStartDate,row.validityEndDate]
        }
        this.addVisible = true;
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
